<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=request.getContextPath()%>/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	
		<table>
			<tr>
				<td>姓名</td>
				<td>金额</td>
			</tr>
			<c:forEach items="${list}" var="up">
					<tr>
						<td>${up.user.username}</td>
						<td>${up.investMoney }</td>
					</tr>		
			</c:forEach>
		</table>
	<div id="main" style="height:400px;width:1000px">
	</div>

</body>
</html>
<script>
	var myChart = echarts.init(document.getElementById('main'));
	
	myChart.showLoading();
	$.ajax({
		type : "post",
		async: true,
		url	:"http://localhost:8080/qzg/data/topInvestOfUser",
		dataType : "json",
		success : function(json3){
			if(json3){
				alert(json3.json1);
				alert(json3.json2);
				option = {
					    color: ['#3398DB'],
					    tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        }
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis : [
					        {
					            type : 'category',
					            data :json3.json1 ,
					            axisTick: {
					                alignWithLabel: true
					            }
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					        }
					    ],
					    series : [
					        {
					            name:'直接访问',
					            type:'bar',
					            barWidth: '60%',
					            data:json3.json2,
					        }
					    ]
					};
				myChart.hideLoading();
				myChart.setOption(option);
				
			}
		},
		error :function(errorMsg,status){
			alert("请求数据失败:" + errorMsg + "/" + status);
		}
	});
	//myChart.setOption(option);
</script>

